<template>
  <div v-clickoutside="handleClickoutside">
    <el-input ref="search" @keyup.up.native="selectTopItem()" @keyup.down.native="selectBottomItem()"
      @keydown.enter.native="selectItem(currentIndex)" v-model="inputValue" @focus="searchAddress" @input="searchAddress"
      onkeyup="value=value.replace(/\s+/g, '')" onafterpaste="value=value.replace(/\s+/g, '')" v-bind="{
        ...$attrs,
        'show-word-limit': true || $attrs['showWordLimit'],
        placeholder: '请输入地址' || $attrs['placeholder'],
        size: 'medium' || $attrs['size'],
        clearable: true || $attrs['clearable'],
      }" v-on="$listeners"></el-input>
    <div class="adress-box">
      <ul v-show="addressShow" class="adress-detail">
        <li class="address-item" v-for="(addressitem, index) in addressList" :key="index" :class="currentIndex == index ? 'address-active' : ''"
          @click="selectItem(index)">
          <div class="el-icon-location-information">
            {{ addressitem.name }}
          </div>
          <div class="detail-address">
            地址：<span v-if="addressitem.address">{{ addressitem.address }}</span>
          </div>
          <div class="detail-district">
            城市：<span v-if="addressitem.district">{{ addressitem.district }}</span>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import Clickoutside from "element-ui/src/utils/clickoutside";
import { inputTipThrottle } from '@/util/map';
import inputValueMixin from '@/mixins/inputValueMixin'

export default {
  name: 'AddressSearch',
  mixins: [inputValueMixin],
  directives: {
    Clickoutside
  },
  props: {
    deptName: {}
  },
  data() {
    return {
      addressShow: false,
      currentIndex: 0,
      addressList: []
    };
  },
  methods: {
    searchAddress() {
      this.addressShow = true;
      inputTipThrottle({
        city: this.deptName || '',
        keyword: this.inputValue
      }).then(res => {
        this.addressList = res.map(item => {
          return {
            ...item,
            lng: item.location && item.location.lng,
            lat: item.location && item.location.lat,
          }
        }).sort((a, b) => {
          return a.district.includes(this.deptName) && !b.district.includes(this.deptName) ? -1 : 0
        })
      })
    },
    //方向键（向上）
    selectTopItem() {
      if (!this.addressList.length) {
        return
      }
      if (this.currentIndex === 0) {
        this.currentIndex = this.addressList.length - 1;
      } else {
        this.currentIndex--;
      }
    },
    //方向键（向下）
    selectBottomItem() {
      if (!this.addressList.length) {
        return
      }
      if (this.addressList.length - 1 > this.currentIndex) {
        this.currentIndex++;
      } else if (this.addressList.length - 1 === this.currentIndex) {
        this.currentIndex = 0;
      }
    },
    handleClickoutside() {
      this.addressShow = false;
    },
    selectItem(currentIndex) {
      this.addressShow = false;
      const item = this.addressList[currentIndex]
      this.$emit('selectAddress', item)
    }
  }
};
</script>
<style lang="scss" scoped>
.adress-box {
  line-height: 20px;
  width: 100%;
  background: #fff;
  position: absolute;
  left: 0px;
  z-index: 99;
  max-height: 300px;
  overflow: auto;

  .adress-detail {
    border: 1px solid #efefef;
    padding-left: 0px;
    margin-top: 0;

    .address-item {
      border-bottom: 1px solid #DCDFE6;
      &:hover {
        background: #F5F7FA;
      }

      div {
        margin: 0;
        padding: 0 10px;
        list-style: none;
        width: 100%;
        text-align: left;
        line-height: 1.6;
      }

      .detail-address {
        font-size: 17px;
      }

      .detail-district {
        color: #999;
      }
    }

    .address-active {
      // background-color: #000;
      background: #F5F7FA;
    }
  }
}
</style>
